<template>
	<el-main v-loading="isLoad">
		<el-alert title="当前服务器硬件资源使用情况概述，仅供参考！" type="success" style="margin-bottom:20px;"></el-alert>
		<el-descriptions border :column="3">
			<el-descriptions-item label="制造厂商">{{ cpuInfo.cpuVendor }}</el-descriptions-item>
			<el-descriptions-item label="核心数">{{ cpuInfo.cpuNum }}</el-descriptions-item>
			<el-descriptions-item label="CPU型号">{{ cpuInfo.cpuName }}</el-descriptions-item>
		</el-descriptions>
		<el-row :gutter="15">
			<el-col :lg="6" v-for="item in this.cpuList" :key="item.id">
				{{item.series.data}}
				<el-card shadow="never">
					<scEcharts height="300px" :option="item"></scEcharts>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="15">
			<el-alert title="服务器内存与交换区使用情况，仅供参考！" type="success" style="margin-bottom:20px;"></el-alert>
			<el-col :lg="6">
				<el-card shadow="never">
					<scEcharts height="300px" :option="this.memOption"></scEcharts>
				</el-card>
			</el-col>
				<el-col :lg="9">
					<el-card shadow="never" style="height: 340px">
						<el-descriptions border :column="1">
							<el-descriptions-item label="jvm总内存">{{ jvmInfo.total }}</el-descriptions-item>
							<el-descriptions-item label="jvm最大">{{ jvmInfo.max }}</el-descriptions-item>
							<el-descriptions-item label="jvm已使用">{{ jvmInfo.user }}</el-descriptions-item>
							<el-descriptions-item label="jvm使用率">{{ jvmInfo.usageRate }}</el-descriptions-item>
							<el-descriptions-item label="jvm空闲">{{ jvmInfo.freeRate }}</el-descriptions-item>
							<el-descriptions-item label="JdkVersion">{{ jvmInfo.jdkVersion }}</el-descriptions-item>
							<el-descriptions-item label="jdk路径">{{ jvmInfo.jdkHome }}</el-descriptions-item>
						</el-descriptions>
					</el-card>
				</el-col>
			<el-col :lg="9">
				<el-card shadow="never" style="height: 340px">
					<el-descriptions border :column="1">
						<el-descriptions-item label="操作系统名">{{ sysInfo.osName }}</el-descriptions-item>
						<el-descriptions-item label="系统架构">{{ sysInfo.osArch }}</el-descriptions-item>
						<el-descriptions-item label="服务器名称">{{ sysInfo.computerName }}</el-descriptions-item>
						<el-descriptions-item label="服务器Ip">{{ sysInfo.computerIp }}</el-descriptions-item>
						<el-descriptions-item label="项目路径">{{ sysInfo.userDir }}</el-descriptions-item>
					</el-descriptions>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="15">
			<el-alert title="服务器硬盘使用情况，仅供参考！" type="success" style="margin-bottom:20px;"></el-alert>
			<el-col :lg="6" v-for="item in sysFileInfo">
				<el-card shadow="never" style="height: 340px">
					<el-descriptions border :column="1">
						<el-descriptions-item label="盘符路径">{{ item.dirName }}</el-descriptions-item>
						<el-descriptions-item label="盘符类型">{{ item.sysTypeName }}</el-descriptions-item>
						<el-descriptions-item label="文件类型">{{ item.typeName }}</el-descriptions-item>
						<el-descriptions-item label="总大小">{{ item.total }}</el-descriptions-item>
						<el-descriptions-item label="剩余大小">{{ item.free }}</el-descriptions-item>
						<el-descriptions-item label="已经使用量">{{ item.used }}</el-descriptions-item>
						<el-descriptions-item label="资源的使用率">{{ item.usage }}</el-descriptions-item>
					</el-descriptions>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
import scEcharts from '@/components/scEcharts';

/**
 * 引入组件 @/components/scEcharts
 * 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
 * 支持props包括 height，width，option
 * 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
 */

export default {
	name: 'chart',
	components: {
		scEcharts
	},
	data() {
		return {
			isLoad:true,
			cpuInfo:{},
			memInfo:{},
			jvmInfo:{},
			sysInfo:{},
			sysFileInfo:[],
			cpuList: [],
			memOption:{},
			timer:null
		}
	},
	created:function(){
		clearInterval(this.timer)
		this.timer = null;
	},
	beforeUnmount() {
		clearInterval(this.timer);
		this.timer = null
	},
	mounted() {
		this.getHardwareInfo();
		this.setTimer();
	},
	methods: {
		setTimer() {
			if(this.timer == null) {
				this.timer = setInterval( () => {
					this.getHardwareInfo();
				}, 10000)
			}
		},
		async getHardwareInfo() {
			var res = await this.$API.system.monitor.getHardwareInfo.get();
			if(res.code==200)
			{
				this.isLoad = false;
				this.cpuList = [];
				this.cpuInfo = res.data.cpuInfo;
				this.memInfo = res.data.memInfo;
				this.jvmInfo = res.data.jvmInfo;
				this.sysInfo = res.data.sysInfo;
				this.sysFileInfo = res.data.sysFileInfo;
				var userItem = {
						title: {
							text: 'CPU使用率',
							subtext: '10秒刷新一次',
						},
						series: [{
							center: ['50%', '60%'],
							type: 'gauge',
							anchor: {
								show: true,
								showAbove: true,
								size: 20,
								itemStyle: {
									borderWidth: 5
								}
							},
							progress: {
								show: true
							},
							data: [{value: parseFloat(this.cpuInfo.user)}]
						}]
					};
				this.cpuList.push(userItem);
				var idleItem={
						title: {
							text: '空闲时间',
							subtext: '10秒刷新一次',
						},
						series: [{
							center: ['50%', '60%'],
							type: 'gauge',
							anchor: {
								show: true,
								showAbove: true,
								size: 20,
								itemStyle: {
									borderWidth: 5
								}
							},
							progress: {
								show: true
							},
							data: [{value: parseFloat(this.cpuInfo.idle)}]
						}]
					};
				this.cpuList.push(idleItem);
				var iowaitItem={
					title: {
						text: '等待I/O的CPU时间',
						subtext: '10秒刷新一次',
					},
					series: [{
						center: ['50%', '60%'],
						type: 'gauge',
						anchor: {
							show: true,
							showAbove: true,
							size: 20,
							itemStyle: {
								borderWidth: 5
							}
						},
						progress: {
							show: true
						},
						data: [{value: parseFloat(this.cpuInfo.iowait)}]
					}]
				};
				this.cpuList.push(iowaitItem);
				var cSysItem={
					title: {
						text: '内核态CPU时间',
						subtext: '10秒刷新一次',
					},
					series: [{
						center: ['50%', '60%'],
						type: 'gauge',
						anchor: {
							show: true,
							showAbove: true,
							size: 20,
							itemStyle: {
								borderWidth: 5
							}
						},
						progress: {
							show: true
						},
						data: [{value: parseFloat(this.cpuInfo.cSys)}]
					}]
				};
				this.cpuList.push(cSysItem);

				var niceItem={
					title: {
						text: '进程所占用的CPU时间',
						subtext: '10秒刷新一次',
					},
					series: [{
						center: ['50%', '60%'],
						type: 'gauge',
						anchor: {
							show: true,
							showAbove: true,
							size: 20,
							itemStyle: {
								borderWidth: 5
							}
						},
						progress: {
							show: true
						},
						data: [{value: parseFloat(this.cpuInfo.nice)}]
					}]
				};
				this.cpuList.push(niceItem);
				var irqItem={
					title: {
						text: '硬中断的CPU时间',
						subtext: '10秒刷新一次',
					},
					series: [{
						center: ['50%', '60%'],
						type: 'gauge',
						anchor: {
							show: true,
							showAbove: true,
							size: 20,
							itemStyle: {
								borderWidth: 5
							}
						},
						progress: {
							show: true
						},
						data: [{value: parseFloat(this.cpuInfo.irq)}]
					}]
				};
				this.cpuList.push(irqItem);
				var softirqItem={
					title: {
						text: '软中断的CPU时间',
						subtext: '10秒刷新一次',
					},
					series: [{
						center: ['50%', '60%'],
						type: 'gauge',
						anchor: {
							show: true,
							showAbove: true,
							size: 20,
							itemStyle: {
								borderWidth: 5
							}
						},
						progress: {
							show: true
						},
						data: [{value: parseFloat(this.cpuInfo.softirq)}]
					}]
				};
				this.cpuList.push(softirqItem);
				var stealItem={
					title: {
						text: '其他虚拟机占用的CPU时间',
						subtext: '10秒刷新一次',
					},
					series: [{
						center: ['50%', '60%'],
						type: 'gauge',
						anchor: {
							show: true,
							showAbove: true,
							size: 20,
							itemStyle: {
								borderWidth: 5
							}
						},
						progress: {
							show: true
						},
						data: [{value: parseFloat(this.cpuInfo.steal)}]
					}]
				};
				this.cpuList.push(stealItem);
				this.memOption= {
					title: {
						text: '内存使用情况',
						subtext: '10秒刷新一次',
					},
					tooltip: {
						trigger: 'item'
					},
					series: [
						{
							name: '总量:'+this.memInfo.total,
							type: 'pie',
							radius: ['40%', '70%'],
							center: ['50%', '60%'],
							label: false,
							data: [
								{value: parseFloat(this.memInfo.freeRate),name: '占用内存%'},
								{value: parseFloat(this.memInfo.usageRate), name: '空闲内存%'}
							]
						}
					]
				}
			}
		},
	}
}
</script>

<style>
</style>
